<template>
  <div class>
    <ul class="pho-image-show">
      <li v-for="(item, i) in value" :key="i">
        <van-image :src="item.url" @click="onPreview(item, i)"></van-image>
        <!-- <div class="pho-image-show--mask" v-if="!item.url">
          <van-loading size="24px" vertical>上传中...</van-loading>
        </div>-->
        <div v-if="!onlyShow" class="pho-image-show--delete" @click.stop="clickDelete(i)">
          <van-icon name="cross" />
        </div>
      </li>
      <!-- <li v-if="!onlyShow"> -->
      <slot name="default"></slot>
      <!-- </li> -->
    </ul>
  </div>
</template>

<script>
import { formatFile } from "../../../utils/index";
import { ImagePreview } from "vant";
export default {
  props: {
    // 回显的文件列表
    value: {
      type: Array,
      default: () => [],
    },
    // 只显示
    onlyShow: {
      type: Boolean,
      default: false,
    },
    // 	下载的文件字段名
    dName: {
      type: String,
      default: "",
    },
    // 文件下载地址
    download: {
      type: String,
      default: "",
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },

  methods: {
    formatFile,
    onPreview(item, startPosition) {
      if (!item.url) return;
      const images = this.value
        .filter((item) => item.url)
        .map((item) => item.url + "");
      ImagePreview({ images, startPosition, closeable: true });
    },

    // 删除文件
    clickDelete(i) {
      if (this.readonly) return;
      const value = this.value;
      value.splice(i, 1);
      this.$emit("update:value", value);
      this.$emit("change", value);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/color";
.pho-image-show {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
  li {
    position: relative;
    margin: 0 8px 8px 0;
    cursor: pointer;
    width: 80px;
    height: 80px;

    .van-image {
      width: 100%;
      height: 100%;
    }
    .pho-image-show--mask {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(50, 50, 51, 0.88);
      .van-loading__text {
        font-size: 12px;
        color: #fff;
      }
    }
    .pho-image-show--delete {
      position: absolute;
      top: 0;
      right: 0;
      width: 14px;
      height: 14px;
      text-align: center;
      line-height: 14px;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 0 0 0 12px;
      font-size: 8px;
      color: #fff;
    }
  }
}
</style>
